<template>
	<view style="padding: 30rpx;"> 
		<view class="userBox" v-for="(item, index) in messages" :key="index" 
		@touchstart="onTouchStart(index, $event)"
		@touchmove="onTouchMove(index, $event)"
		@touchend="onTouchEnd(index)">
		
			<image 	:style="{ transform: `translateX(${translateX[index]}px)` }"
					class="headImage"
					:src="this.senders[index].avatar"
					mode="widthFix"
					@click="goProfile(index)"
					style="max-width: 60px; max-height: 60px;">
			</image>
			
			<view class="userDetail" :style="{ transform: `translateX(${translateX[index]}px)` }">
				
				<view v-if="this.messages[index].type === 0" style="display: flex; margin-right: auto; width: 100%;">
					<view style="margin-right: auto;">
						<text style="font-weight: bold;"> {{senders[index].name}}</text>
						<text>\n申请成为你的好友</text>
					</view>
					<view>
						<button @click="accept(index)" style="background-color: greenyellow; width: 80px;">接受</button>
					</view>
				</view>
				
				<view v-if="this.messages[index].type === 1" style="display: flex; margin-right: auto; width: 100%;">
					<view style="margin-right: auto;">
						<text style="font-weight: bold;"> {{senders[index].name}}</text>
						<text style="font-weight: bold;">\n</text>
						<text style="word-break: break-all;">{{ item.text }}</text>
					</view>
					<view>
						<button @click="reply(index)" style="background-color: aliceblue; width: 80px;">回复</button>
					</view>
				</view>
				
				<view class="buttons">
					<image class="button" @tap="deleteMessage(index, $event)" src='/static/tab-Icons/delete.png'>删除</image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	export default {
		data() {
			return {
				messages:[
					
				],
				senders:[
					
				],
				
				startX: 0,
				maxTranslateX: -100, 
				translateX: {},
			}
		},
		
		onLoad() {
			this.user = uni.getStorageSync('xm-user');
			let that = this;
			console.log('---------------------------------------------')
			uni.request({
				url: config.baseUrl + '/message/select?receiveId=' + that.user.id,
				method: 'GET',
				success(res) {
					that.messages = res.data
					for(let i=0; i < that.messages.length; i++){
						uni.request({
							url: config.baseUrl + '/users/selectById?id='+that.messages[i].send_id,
							method:'GET',
							
							success(re){
								that.senders.push(re.data);
							}
						})
					}
				}
			});	
		},
		
		methods: {
			onTouchStart(index, event) {
				this.startX = event.touches[0].pageX;
				console.log("开始移动");
			},
			onTouchMove(index, event) {
				//console.log("正在移动");
				const moveX = event.touches[0].pageX - this.startX;

				if (moveX < 0 && moveX > this.maxTranslateX) {
					this.$set(this.translateX, index, moveX);
				} else if (moveX > 0 && this.translateX[index] < 0) {
					this.$set(this.translateX, index, Math.min(0, this.maxTranslateX + moveX));
				}
				// 阻止事件传播，避免触发点击事件
			    
			},
			onTouchEnd(index) {
				console.log("结束移动");
				if (this.translateX[index] < this.maxTranslateX / 2) {
					this.$set(this.translateX, index, this.maxTranslateX);
				} else {
					this.$set(this.translateX, index, 0);
				}
			},
			goProfile(index){
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + this.messages[index].send_id
				})
			},
			
			accept(index){
				let that = this
				let form0 = {
					self_id : that.user.id,
					friend_id : that.senders[index].id
				};
				
				let form = JSON.parse(JSON.stringify(form0));
				
				uni.request({
					url: config.baseUrl + "/friendchart/Insert",
					data: form,
					method:'POST',
					success(res) {
						if(res.statusCode === 200){
							uni.showToast({
								icon: 'success',
								title: '添加成功'
							})
						}
						else if(res.statusCode === 500){
							uni.showToast({
								icon: 'error',
								title: '已是好友'
							})
						}
					}
				})
				
				uni.request({
					url: config.baseUrl+'/message/Delete?sendId='+that.messages[index].send_id+'&&receiveId='+that.user.id,
					method:'DELETE',
					
					success(res){
						
					}
				})
				
				that.messages.splice(index,1);
			},
			
			deleteMessage(index, $event){
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否删除所选消息?",
					success(res) {
						if (res.confirm) {
							uni.request({
								url: config.baseUrl + '/message/deletebyid?Id='+that.messages[index].id,
								method: "DELETE",
					
								success(res){
									that.messages.splice(index, 1);
									that.translateX[index] = 0;
									
									uni.showToast({
										icon: "success",
										title: "删除成功",
										duration: 800,
									});
									console.log('删除成功！')
								},
							});
						}
					},
				});
				
				
			},
			
			reply(index){
				uni.navigateTo({
					url: '/pages/dialogue/dialogue?data=' + this.messages[index].send_id
				})
			}
		}
	}
</script>

<style scoped>
	.userBox {
		display: flex;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
		justify-content: flex-start;
		align-items: center;
	}
	
	.userDetail {
		margin-left: 20rpx;
		width: 100%;
	}
	
	.userBox,
	.buttons {
		transition: transform 0.3s ease;
	}
	
	.buttons {
		display: flex;
		flex-direction: row;
		width: 66px; /* 按钮总宽度 */
		position: absolute;
		right: -120px; /* 调整按钮的位置 */
		top: 0;
		bottom: 0;
		z-index: 0;
		background-color: #fff; /* 给按钮区域设置背景色 */
	}
	
	.button {
		width: 50px; /* 确保宽度和高度相等 */
		height: 50px; /* 确保宽度和高度相等 */
		margin-top: 1px;
		text-align: center;
		line-height: 60px; /* 垂直居中文本 */
		color: #fff;
		border-radius: 50%; /* 圆形按钮 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 阴影 */
	}
</style>
